<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title>MeteoCal | #{userBean.name}</title>
        <h:outputStylesheet name="css/style.css"/>
    </h:head>
    
    <h:body>
        <div id="container">
        <div id="sidebar">
            
        <h:form>
            <p:poll interval="15" listener="#{notificationCheckBean.check()}"/>
            <p:menu id="pro" model="#{menuBean.model}"  style="min-height: 620px;"/>
        </h:form>                      
        </div>
            
        <div id="content">
        <h:form id="form"> 
            
            <p:growl id="messages"  life="7000" showDetail="true" globalOnly="true" autoUpdate="true"/>
            <p:schedule  styleClass="default" widgetVar="schedulevar" id="schedule"  value="#{scheduleBean.eventModel}" draggable="false" aspectRatio="1.8" resizable="false" timeZone="GMT+1">
                <p:ajax event="eventSelect" listener="#{scheduleBean.onEventSelect}" update="eventDetails,eventEditDialog,weather,icon,button"  oncomplete="handleShowDetails(args)" />
            </p:schedule> 
            
            <!--*************************************** EVENT DETAILS WINDOW *********************************************-->
            <p:dialog  widgetVar="eventDetails" header="Event details" showEffect="scale" hideEffect="clip" resizable="false" style="max-width: 900px; max-height:530px; " >
                
                <h:panelGrid id="eventDetails" columns="2" style="height:420px;" >
                    <p:outputLabel value="Title " style="font-style: italic"/>
                    <p:outputLabel style="max-width :300px;" value="#{scheduleBean.data.title}"/>
                    <p:outputLabel value="Location " style="font-style: italic"/>
                    <p:outputLabel value="#{scheduleBean.data.location}"/>
                    <p:outputLabel value="Date " style="font-style: italic"/>
                    <h:outputText value="#{scheduleBean.data.data}">
                        <f:convertDateTime pattern="EEE d MMM yyyy"  locale="en_US"  />
                    </h:outputText>
                    <p:outputLabel value="Begin time " style="font-style: italic"/>
                    <p:outputLabel value="#{scheduleBean.data.beginn}"/>
                    <p:outputLabel value="End time " style="font-style: italic"/>
                    <p:outputLabel value="#{scheduleBean.data.endd}"/>
                    <p:outputLabel value="Description " style="font-style: italic"/>
                    <p:outputLabel value="#{scheduleBean.data.activity}"/>
                    <p:outputLabel value="Outdoor " style="font-style: italic"/>
                    <p:selectBooleanCheckbox disabled="true" value="#{scheduleBean.data.outdoor}"></p:selectBooleanCheckbox>
                    <p:outputLabel value="Private " style="font-style: italic"/>
                    <p:selectBooleanCheckbox disabled="true" value="#{scheduleBean.data.privatee}"></p:selectBooleanCheckbox>    
                    <p:outputLabel value="Participants " style="font-style: italic"/>
                    <p:outputLabel/>
                    <p:outputLabel/>
                    <p:dataTable var="p" value="#{scheduleBean.parteveinf}"  scrollable="true" scrollHeight="120" style="height:150px;">
                        <p:column headerText="Name">
                            <h:outputText value="#{p.name}"/>
                        </p:column>
                        <p:column headerText="Surname">
                            <h:outputText value="#{p.surname}"/>
                        </p:column>
                        <p:column headerText="Email">
                            <h:outputText value="#{p.email}"/>
                        </p:column>
                        <p:column headerText="State">
                            <h:outputText value="#{p.state}"/>
                        </p:column>
                    </p:dataTable>
                </h:panelGrid>
                
                <p:panel   style="margin-left: auto; margin-right: auto; margin-top: 0px; max-width: 50%; border-style: none; position:relative; top:-435px;left:240px;">
                    
                    <h:panelGrid  id="weather" columns="2" class="weather" style="float: left;width:290px;">
                        <p:outputLabel value="Condition"> </p:outputLabel>
                        <p:outputLabel value="#{scheduleBean.weather.description}"/>
                        <p:outputLabel value="Max Temperature"> (&deg;C)</p:outputLabel>
                        <p:outputLabel value="#{scheduleBean.weather.tempmax}"/>
                        <p:outputLabel value="Min Temperature"> (&deg;C)</p:outputLabel>
                        <p:outputLabel value="#{scheduleBean.weather.tempmin}"/>
                        <p:outputLabel value="Chance of Rain"> (&#37;)</p:outputLabel>
                        <p:outputLabel value="#{scheduleBean.weather.rain}"/>
                        <p:outputLabel value="Humidity"> (&#37;)</p:outputLabel>
                        <p:outputLabel value="#{scheduleBean.weather.humidity}"/>
                        <p:outputLabel value="Wind Speed"> (km/h)</p:outputLabel>
                        <p:outputLabel value="#{scheduleBean.weather.windspeed}"/> 
                    </h:panelGrid>
                    
                    <p:graphicImage id="icon" value="http://localhost:8080/trunk/images/#{scheduleBean.weather.icon}.png" style="float:right; width:100px; height:100px;"/>
               
                </p:panel>
                <h:panelGrid style="position:relative; top:-105px; left:-520px;" id="button" columns="2">
                    <p:commandButton  immediate = "true" rendered="#{scheduleBean.partown}" value="DECLINE" action="#{scheduleBean.setRefused()}" oncomplete="PF('eventDetails').hide();PF('schedulevar').update()" icon="ui-icon-closethick"></p:commandButton>
                    <p:commandButton  immediate = "true" rendered="#{scheduleBean.rejoin}" value="PARTICIPE" action="#{scheduleBean.setConfirmed()}" oncomplete="PF('eventDetails').hide();PF('schedulevar').update()" icon="ui-icon-check"></p:commandButton>
                    <p:commandButton  immediate = "true" rendered="#{scheduleBean.partown||scheduleBean.rejoin }" value="REMOVE" action="#{scheduleBean.removeParticipation()}" oncomplete="PF('eventDetails').hide();PF('schedulevar').update()" icon="ui-icon-trash"></p:commandButton>
                    <p:commandButton  immediate = "true" rendered="#{scheduleBean.eventown}" value="DELETE" action="#{scheduleBean.deleteEvent()}" oncomplete="PF('eventDetails').hide();PF('schedulevar').update()" icon="ui-icon-trash"></p:commandButton>
                    <p:commandButton  rendered="#{scheduleBean.eventown}" value="UPDATE" oncomplete="PF('eventDetails').hide();PF('eventEditDialog').show()" icon="ui-icon-pencil"></p:commandButton> 
                </h:panelGrid>
            </p:dialog>
            
            <!--******************************************** EVENT EDIT WINDOW *******************************************-->
            <p:dialog id="eventEditDialog" widgetVar="eventEditDialog" header="Event update" showEffect="clip" hideEffect="clip" resizable="false" style="max-width: 850px; max-height: 650px">
                
                <h:panelGrid columns="3">
                    <p:outputLabel for="title" value="Title" style="font-style: italic"/>
                    <p:inputText id="title" value="#{scheduleBean.eventupdating.title}" required="true"/> 
                    <br/>
                    <p:outputLabel for="location" value="Location" style="font-style: italic"/>
                    <p:inputText id="location" value="#{scheduleBean.location}" required="true"/>
                    <br/>
                    <p:outputLabel for="popup" value="Date" style="font-style: italic"/>
                    <p:calendar id="popup" value="#{scheduleBean.eventupdating.data}" required="true"/>
                    <br/>
                    <p:outputLabel for="beginTime" value="Begin time" style="font-style: italic"/>
                    <p:calendar id="beginTime" value="#{scheduleBean.begin}" pattern="HH:mm" timeOnly="true" required="true"/>
                    <br/>
                    <p:outputLabel for="endTime" value="End time" style="font-style: italic"/>
                    <p:calendar id="endTime" value="#{scheduleBean.end}" pattern="HH:mm" timeOnly="true" required="true"/>
                    <br/>
                    <p:outputLabel value="Description" style="font-style: italic"/>
                    <p:inputTextarea id="description" rows="3" cols="54" maxlength="244" autoResize="false" value="#{scheduleBean.eventupdating.activity}"/>
                    <br/>
                    <p:outputLabel value="Outdoor" style="font-style: italic"/>
                    <p:selectBooleanCheckbox value="#{scheduleBean.eventupdating.outdoor}"/>
                    <br/>
                    <p:outputLabel value="Private" style="font-style: italic"/>
                    <p:selectBooleanCheckbox value="#{scheduleBean.eventupdating.privatee}"/>
                    <br/>
                </h:panelGrid>
                
                <h:panelGrid columns="2">
                    <p:outputLabel value="Participants" style="font-style: italic"/>
                    <p:outputLabel/>
                    <p:outputLabel/>
                    <p:dataTable var="p" value="#{scheduleBean.parteveinf}" scrollable="true" scrollHeight="90">
                        <br/>
                        <p:column headerText="Name">
                            <h:outputText value="#{p.name}"/>
                        </p:column>
                        <p:column headerText="Surname">
                            <h:outputText value="#{p.surname}"/>
                        </p:column>
                        <p:column headerText="Email">
                            <h:outputText value="#{p.email}"/>
                        </p:column>
                        <p:column headerText="State">
                            <h:outputText value="#{p.state}"/>
                        </p:column>
                        <p:column headerText="Action">
                            <p:commandButton icon="ui-icon-trash"
                            title="Delete this participant"
                            actionListener="#{scheduleBean.removeParticipation(p)}"
                            ajax="false"/>
                        </p:column>
                    </p:dataTable>
                </h:panelGrid>
                
                <h:panelGrid style="margin-top:2px;" columns="2">
                    <p:outputLabel value="Add new participants" style="font-style: italic"/>
                    <p:scrollPanel style=" width:650px;height:50px">
                        <p:selectManyCheckbox styleClass="selectManyListbox" id="listUsers" value="#{scheduleBean.participants}" >
                            <f:selectItems value="#{scheduleBean.users}" var="c" itemLabel="#{c.email}" itemValue="#{c.email}"/>
                        </p:selectManyCheckbox>
                    </p:scrollPanel>
                    <p:commandButton value="CANCEL" id="cancel" oncomplete="PF('eventEditDialog').hide();PF('eventDetails').show()" icon="ui-icon-closethick"/>
                    <p:commandButton value="SAVE" id="submit" action="#{scheduleBean.editEvent}" oncomplete="handleRequest(args)" icon="ui-icon-check"/>
                </h:panelGrid>
                
            </p:dialog>
            
        </h:form>
            
        <script type="text/javascript">
        function handleRequest(args) {
        if(args.validation===false) {
            PF('eventEditDialog').jq.effect("shake", {times:5}, 150);
        }
        else {
            PF('eventEditDialog').hide();
            PF('schedulevar').update();
        }
        }
    
        function handleShowDetails(args) {
            if(args.show===true) {
             PF('eventDetails').show();
         }
        }
    
        </script>
            
        </div>
        </div>
    </h:body>
</html>